<template>
	<view>
		<view class="detail-top">
			<!-- 发布者部分 -->
			<view class="header1">
				<view class="left">
					<view class="img">
						<image lazy-load="true"
							style="width: 100%;height: 100%; background-color: #eeeeee;border-radius: 50%;"
							:mode="'scaleToFill'" :src="pubUser.avater" @error="imageError"></image>
					</view>
					<view class="content">
						<view class="title">
							<span style="margin-right: 15px;">{{ pubUser.nickname }}</span>
							<button class="btn" @click="showChatPopup"
								:disabled="loginUser._id === curGoodsObj.user_id">私聊</button>
						</view>
						<view class="time" v-if="comeTimeState">在线中</view>
						<view class="time" v-else>{{ comeTimeStr }}来过</view>
					</view>

				</view>
				<view class="right" style="display: flex;align-items: center;">
					<button v-if="!guanzhuState" class="btn" style="margin-right: 10px;" @click="guanzhu">关注</button>
					<button v-if="guanzhuState" size="mini"
						style="background-color: #ffd400;border-radius: 30px;margin-right: 10px;"
						@click="cancleGuanzhu">取消关注</button>
					<button v-if="!collectionState" class="btn" @click="showCollection">收藏</button>
					<button v-if="collectionState" size="mini" style="background-color: #ffd400;border-radius: 30px;"
						@click="cancleCollection">取消收藏</button>
				</view>
			</view>
			<!-- 商品信息部分 -->
			<view class="goods">
				<view class="title">{{ curGoodsObj.title }}</view>
				<view class="message">
					<view class="left">
						<view>
							<span
								style="font-size: 14px;color: red;font-weight: 700;margin-right: 15px;">￥{{ curGoodsObj.transfer_price }}</span>
							<span
								style="font-size: 14px;color: gray;font-weight: 700;text-decoration: line-through;">￥{{ curGoodsObj.buy_price }}</span>
						</view>
						<view>
							<span style="font-size: 13px;color: gray;font-weight: 700;">交易方式：</span>
							<span
								style="font-size: 13px;color: #007947;font-weight: 700;">{{ curGoodsObj.trading[0] }}</span>
							|
							<span
								style="font-size: 13px;color: RGB(163,14,255);font-weight: 700;">{{ curGoodsObj.trading[1] }}</span>
						</view>
					</view>
					<view class="right">
						<view>
							<span
								style="font-size: 13px;color: gray;font-weight: 700;">{{ curGoodsObj.look_num }}次浏览</span>
							<span
								style="font-size: 13px;color: gray;font-weight: 700;margin-left: 25px;">{{ collectionTotal }}人收藏</span>
						</view>
						<view style="display: flex;justify-content: flex-end;">
							<span style="font-size: 13px;color: gray;font-weight: 700;">{{ pubTimeStr }}发布</span>
						</view>
					</view>
				</view>
				<!-- 商品介绍部分 -->
				<view class="content">
					{{ curGoodsObj.desc }}
				</view>
				<!-- 商品图片部分 -->
				<view class="images" v-if="curGoodsObj.images">
					<image lazy-load="true" v-if="curGoodsObj.images.length>=1"
						style="width: 100%; background-color: #eeeeee;border-top-right-radius: 15px;border-top-left-radius: 15px;"
						:mode="'scaleToFill'" :src="curGoodsObj.images[0]" @error="imageError"></image>
					<image lazy-load="true" v-if="curGoodsObj.images.length>=2"
						style="width: 48vw; height: 200px; background-color: #eeeeee;margin-right: 5px;" :mode="'scaleToFill'"
						:src="curGoodsObj.images[1]" @error="imageError"></image>
					<image lazy-load="true" v-if="curGoodsObj.images.length>=3"
						style="width: 44vw; height: 200px; background-color: #eeeeee;" :mode="'scaleToFill'"
						:src="curGoodsObj.images[2]" @error="imageError"></image>
				</view>
				<!-- 商品视频部分 -->
				<view class="video" v-if="videoState">
					<!-- <video style="width: 100%;" id="myVideo" src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
					                    @error="videoErrorCallback" enable-danmu danmu-btn controls></video> -->
					<video v-for="(item,index) in curGoodsObj.videoes" :key="index" style="width: 100%;" id="myVideo"
						:src="item" @error="videoErrorCallback" enable-danmu danmu-btn controls></video>
				</view>
			</view>
			<!-- 留言部分 -->
			<view class="commen">
				<!-- 头部部分 -->
				<view class="header">
					<span style="font-size: 14px;font-weight: 700;margin-right: 15px;">留言 · {{ yanTotal }}</span>
					<button class="btn" @click="showYanPopup('想了解什么,就说出来吧')">我也想问</button>
				</view>
				<!-- 主题部分 -->
				<view class="section" v-if="yanList.length !== 0">
					<!-- 一级 -->
					<view class="inner" v-for="item in yanList" :key="item._id">
						<view class="first">
							<view class="img">
								<image lazy-load="true"
									style="width: 100%;height: 100%; background-color: #eeeeee;border-radius: 50%;"
									:mode="'scaleToFill'" :src="item.user_id.avater" @error="imageError"></image>
							</view>
							<view class="content">
								<view>
									<span
										style="font-size: 14px;font-weight: 700;color: gray;">{{ item.user_id.nickname }}</span>
									·
									<span
										style="font-size: 12px;font-weight: 700;color: gray;margin-right: 25px;">{{ item.time }}</span>
								</view>
								<view>
									<span style="font-size: 12px;font-weight: 700;color: red;">@卖家:</span>
									<span
										style="font-size: 12px;font-weight: 700;color: #007947;">{{ item.content }}</span>
								</view>
							</view>
							<view class="si">
								<button class="btn"
									@click="showYanPopup(`回复 @${item.user_id.nickname}：`,item,item)">回复</button>
							</view>
						</view>
						<!-- 二级 -->
						<view style="padding-left: 40px;box-sizing: border-box;" v-if="item.children">
							<view class="second" v-if="!item.is_zhan"
								v-for="item2 in item.children.slice(0,1)" :key="item2._id">
								<view class="img">
									<image lazy-load="true"
										style="width: 100%;height: 100%; background-color: #eeeeee;border-radius: 50%;"
										:mode="'scaleToFill'" :src="item2.user_id.avater" @error="imageError"></image>
								</view>
								<view class="content">
									<view>
										<span
											style="font-size: 14px;font-weight: 700;color: gray;">{{ item2.user_id.nickname }}</span>
										·
										<span
											style="font-size: 12px;font-weight: 700;color: gray;margin-right: 25px;">{{ item2.time }}</span>
										<uni-tag v-if="item2.is_seller" text="卖家" style="padding: 0;margin: 0;"
											size="mini"
											custom-style="background-color: RGB(230,14,255); border-color: RGB(230,14,255); color: #fff;">
										</uni-tag>
									</view>
									<view>
										<span
											style="font-size: 12px;font-weight: 700;color: dimgray;">@{{ item2.pnickname }}:</span>
										<span
											style="font-size: 12px;font-weight: 700;color: red;">{{ item2.content }}</span>
									</view>
								</view>
								<view class="si">
									<button class="btn"
										@click="showYanPopup(`回复 @${item2.user_id.nickname}：`,item2,item)">回复</button>
								</view>
							</view>

							<view class="second" v-if="item.is_zhan" v-for="item2 in item.children" :key="item2._id">
								<view class="img">
									<image lazy-load="true"
										style="width: 100%;height: 100%; background-color: #eeeeee;border-radius: 50%;"
										:mode="'scaleToFill'" :src="item2.user_id.avater" @error="imageError"></image>
								</view>
								<view class="content">
									<view>
										<span
											style="font-size: 14px;font-weight: 700;color: gray;">{{ item2.user_id.nickname }}</span>
										·
										<span
											style="font-size: 12px;font-weight: 700;color: gray;margin-right: 25px;">{{ item2.time }}</span>
										<uni-tag v-if="item2.is_seller" text="卖家" style="padding: 0;margin: 0;"
											size="mini"
											custom-style="background-color: RGB(230,14,255); border-color: RGB(230,14,255); color: #fff;">
										</uni-tag>
									</view>
									<view>
										<span
											style="font-size: 12px;font-weight: 700;color: dimgray;">@{{ item2.pnickname }}:</span>
										<span
											style="font-size: 12px;font-weight: 700;color: red;">{{ item2.content }}</span>
									</view>
								</view>
								<view class="si">
									<button class="btn"
										@click="showYanPopup(`回复 @${item2.user_id.nickname}：`,item2,item)">回复</button>
								</view>
							</view>

							<view v-if="!item.is_zhan" @click="item.is_zhan = true"
								style="font-size: 13px;color: gray;font-weight: 700;margin-left: 25px;">
								查看{{ item.children.length-1 }}条回复
								<uni-icons type="bottom" size="13"></uni-icons>
							</view>
							<view v-if="item.is_zhan" @click="item.is_zhan = false"
								style="font-size: 13px;color: gray;font-weight: 700;margin-left: 25px;">
								收起回复
								<uni-icons type="top" size="13"></uni-icons>
							</view>
						</view>


					</view>
				</view>
			</view>
		</view>
		<!-- 可能感兴趣的部分 -->
		<view class="detail-bottom">
			<!-- 头部部分 -->
			<view class="header">
				<span style="font-size: 14px;font-weight: 700;">你也可能感兴趣</span>
				<span class="refresh" style="font-size: 12px;font-weight: 700;color: dimgray;" @click="huan">
					<uni-icons type="refreshempty" size="15"></uni-icons> 换一批
				</span>
			</view>
			<!-- 主体部分 -->
			<view class="section" v-if="caiGoodsList.length > 1">
				<view class="content">
					<view class="img">
						<image lazy-load="true"
							style="width: 100%;height: 150px; background-color: #eeeeee;border-radius: 10px;"
							:mode="'scaleToFill'" :src="'https://web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'"
							@error="imageError"></image>
					</view>
					<view class="title">
						<span class="con">外出无法照顾，过年回老家带不走撒法发违反认为热污染非撒飞洒地方</span>
						<span class="time">1天前</span>
					</view>
					<view class="price">
						<view style="height: 100%;display: flex;align-items: center;">
							<span style="font-size: 13px;font-weight: 700;color: red;margin-right: 5px;">￥130</span>
							<span style="font-size: 10px;font-weight: 700;color: gray;">40人喜欢</span>
						</view>
						<view style="height: 100%;display: flex;align-items: center;">
							<uni-icons type="eye" size="15"></uni-icons>
							<span style="font-size: 12px;font-weight: 700;color: gray;">130+</span>
						</view>
					</view>
					<view class="user">
						<view class="left">
							<view class="img">
								<image lazy-load="true"
									style="width: 100%;height: 100%; background-color: #eeeeee;border-radius: 50%;"
									:mode="'scaleToFill'"
									:src="'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fbf6fe5f0-4e5c-4dd1-9545-f58151164f0c%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1686713796&t=feddfb90bdb05b44784b95df8423d50b'"
									@error="imageError"></image>
							</view>
							<span style="font-size: 12px;font-weight: 700;color: gray;">爱笑的女孩</span>
						</view>
						<view>
							<uni-icons type="heart-filled" color="red" size="20"></uni-icons>
						</view>
					</view>
				</view>

				<view class="content" v-for="item in caiGoodsList" :key="item._id">
					<view class="img">
						<image lazy-load="true"
							style="width: 100%;height: 150px; background-color: #eeeeee;border-radius: 10px;"
							:mode="'scaleToFill'" :src="item.images[0]" @error="imageError"></image>
					</view>
					<view class="title">
						<span class="con">{{ item.desc }}</span>
						<span class="time">{{ item.time }}</span>
					</view>
					<view class="price">
						<view style="height: 100%;display: flex;align-items: center;">
							<span
								style="font-size: 13px;font-weight: 700;color: red;margin-right: 5px;">￥{{ item.transfer_price }}</span>
							<span style="font-size: 10px;font-weight: 700;color: gray;">{{ item.like }}人喜欢</span>
						</view>
						<view style="height: 100%;display: flex;align-items: center;">
							<uni-icons type="eye" size="15"></uni-icons>
							<span style="font-size: 12px;font-weight: 700;color: gray;">{{ item.look_num }}</span>
						</view>
					</view>
					<view class="user">
						<view class="left">
							<view class="img">
								<image lazy-load="true"
									style="width: 100%;height: 100%; background-color: #eeeeee;border-radius: 50%;"
									:mode="'scaleToFill'" :src="item.user_id.avater" @error="imageError"></image>
							</view>
							<span
								style="font-size: 12px;font-weight: 700;color: gray;">{{ item.user_id.nickname }}</span>
						</view>
						<view>
							<uni-icons v-if="!item.suportState" type="heart" size="20"
								@click="support(item._id)"></uni-icons>
							<uni-icons v-if="item.suportState" type="heart-filled" color="red" size="20"
								@click="cancleSupport(item._id)"></uni-icons>
						</view>
					</view>
				</view>

			</view>
		</view>

		<!-- 收藏弹出框部分 -->
		<uni-popup ref="popup" :mask-click="false" background-color="#fff">
			<view class="collection-popup-content">
				<!-- 头部部分 -->
				<view class="header">
					<view class="left">
						<uni-icons type="folder-add-filled" style="margin-right: 10px;" size="20"
							color="RGB(249,232,81)"></uni-icons>
						<text class="con">选择收藏夹</text>
					</view>
					<view class="right">
						<navigator url="../jyh/collectionAdd">
							<text class="con">新建收藏夹</text>
						</navigator>
					</view>
				</view>
				<!-- 列表部分 -->
				<view class="uni-list">
					<radio-group @change="radioChange">
						<label class="uni-list-cell" v-for="(item, index) in collectionFolderList" :key="item.value">
							<view>{{item.name}} 21</view>
							<view>
								<radio :value="item.value" />
							</view>
						</label>
					</radio-group>
				</view>
				<!-- 底部部分 -->
				<view class="footer">
					<button :disabled="!Boolean(currentCollectionFolder.name)"
						@click="finishSelectCollectionFolder">完成</button>
				</view>
			</view>
		</uni-popup>
		<!-- 留言弹出框部分 -->
		<uni-popup ref="yanpopup" :mask-click="false" background-color="#fff">
			<view class="yan-popup-content">
				<!-- 头部部分 -->
				<view class="header">
					<text>留言</text>
					<text class="x" @click="closeYanPopup">x</text>
				</view>
				<!-- 输入框部分 -->
				<view>
					<input class="uni-input" v-model="yanContent" focus :placeholder="yanTip" />
				</view>
				<!-- 底部部分 -->
				<view class="footer">
					<button :disabled="!yanContent" @click="finishyan">完成</button>
				</view>
			</view>
		</uni-popup>
		<!-- 私聊弹出框部分 -->
		<uni-popup ref="chatpopup" :mask-click="false" background-color="#fff">
			<view class="chat-popup-content">
				<!-- 头部部分 -->
				<view class="header">
					<text>私聊 · {{ filterChatList.length }}</text>
					<text class="x" @click="closeChatPopup">x</text>
				</view>
				<!-- 内容部分 -->
				<view class="section" id="chat-content" v-if="filterChatList.length !== 0">
					<scroll-view :scroll-into-view="scrollToView" id="scrollview" :scroll-with-animation="true"
						scroll-y="true" style="height: 100%;">
						<view class="content" v-for="item in filterChatList" :key="item._id" :id="'msg'+item._id">
							<view class="left"
								v-if="item.my_id._id == curGoodsObj.user_id && item.other_id._id == loginUser._id ">
								<view class="img">
									<image lazy-load="true"
										style="width: 100%;height: 100%; background-color: #eeeeee;border-radius: 50%;"
										:mode="'scaleToFill'" :src="item.my_id.avater" @error="imageError"></image>
								</view>
								<view class="content">
									{{ item.content }}
								</view>
							</view>
							<view class="right"
								v-if="item.my_id._id == loginUser._id && item.other_id._id == curGoodsObj.user_id">

								<view class="content">
									{{ item.content }}
								</view>
								<view class="img">
									<image lazy-load="true"
										style="width: 100%;height: 100%; background-color: #eeeeee;border-radius: 50%;"
										:mode="'scaleToFill'" :src="item.my_id.avater" @error="imageError"></image>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<!-- 没有内容显示的部分 -->
				<view class="wu" style="height: 20vh;text-align: center;padding-top: 15px;"
					v-if="filterChatList.length === 0">
					<uni-icons type="mail-open-filled" size="40"></uni-icons>
					<view>暂无内容</view>
				</view>
				<!-- 输入框部分 -->
				<view class="input">
					<input class="uni-input" v-model="content" focus placeholder="想了解什么,就说出来吧" />
					<button size="mini" :class="{'disable':!content,'btn':content}" :disabled="!content"
						@click="sendMsg">发送</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import timeObj from "./handleTime.js"
	import store from "../../../store/index"
	export default {
		data() {
			return {
				// 当前的商品对象
				curGoodsObj: {},
				// 当前商品的发布者
				pubUser: {},
				// 记录发布者来此页面的时间
				comeTime: "",
				comeTimeState: false,
				// 当前登录的用户
				loginUser: uni.getStorageSync("user") || {},
				// 收藏当前的商品的总人数
				collectionTotal: 0,
				// 收藏的状态
				collectionState: false,
				// 可能喜欢的商品列表
				caiGoodsList: [],
				// 二级评论展开收起状态
				secondState: false,
				// 选择收藏夹列表
				collectionFolderList: [],
				// 选中的收藏夹
				currentCollectionFolder: {},
				// 留言提示信息内容
				yanTip: "",
				// 留言内容
				yanContent: "",
				// 留言列表
				yanList: [],
				// 留言总数
				yanTotal: 0,
				// 存储父级对象
				pobj: {},
				// 存储祖先对象
				zuobj: {},
				// 发送私信内容
				content: "",
				// 私信列表
				chatList: [],
				// 私信列表所有数据
				allChatList:[],
				scrollToView: "",
				// 视频显示状态
				videoState: true,
				// 关注状态
				guanzhuState: false,
				// 点赞列表
				supportList: []
			}
		},
		computed: {
			// 处理发布者来此页面的时间
			comeTimeStr() {
				return timeObj.timeMaker(Number(this.curGoodsObj.come_time))
			},
			// 处理发布时间
			pubTimeStr() {
				return timeObj.timeMaker(this.curGoodsObj.time)
			},
			// 处理完成的私信列表
			filterChatList(){
				let arr = uni.$store._state.data.twk.allChatList.filter(item=>{return item.goods_id === this.curGoodsObj._id})
				let newArr = arr.filter(item=>{return (item.my_id._id == this.loginUser._id && item.other_id._id == this.curGoodsObj.user_id) || (item.my_id._id == this.curGoodsObj.user_id && item.other_id._id == this.loginUser._id) })
				setTimeout(()=>{
					this.scrollToView = newArr[newArr.length - 1]._id
				},1500)
				return newArr
			}
		},
		methods: {
			imageError: function(e) {
				console.log(e)
				// console.error('image发生error事件，携带值为' + e.detail.errMsg)
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			// 显示收藏弹出层方法
			showCollection: function() {
				let token = uni.getStorageSync("token")
				if (!token) {
					uni.showModal({
						title: "您未登录，是否去登录？",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}
						}
					})
					return
				}
				this.$refs.popup.open("bottom")
				this.videoState = false
			},
			// 选中一个收藏文件夹方法
			radioChange: function(evt) {
				for (let i = 0; i < this.collectionFolderList.length; i++) {
					if (this.collectionFolderList[i].value === evt.detail.value) {
						this.currentCollectionFolder = this.collectionFolderList[i];
						break;
					}
				}
			},
			// 获取当前登录者有没有收藏该商品方法
			async getCollectionState() {
				let {
					data
				} = await uni.$http.get("/twk/getcollection?loginid=" + this.loginUser._id + "&gid=" + this.curGoodsObj
					._id)
				if (data.code === 200) {
					this.collectionState = data.state
					this.collectionTotal = data.total
				}
			},
			// 选择收藏文件夹完成方法
			finishSelectCollectionFolder: async function() {
				let obj = {
					time: Date.now(),
					user_id: this.loginUser._id,
					goods_id: this.curGoodsObj._id,
					collectionfolder_id: this.currentCollectionFolder._id
				}
				let {
					data
				} = await uni.$http.post("/twk/addcollection", obj)
				if (data.code === 200) {
					this.getCollectionState()
					uni.showToast({
						title: "收藏成功"
					})
					this.currentCollectionFolder = {}
					this.collectionState = true
				}
				this.$refs.popup.close()
				this.videoState = true
			},
			// 取消收藏方法
			cancleCollection: async function() {
				let obj = {
					loginid: this.loginUser._id,
					gid: this.curGoodsObj._id
				}
				let _this = this
				uni.showModal({
					title: "确定取消收藏吗？",
					success: async function(res) {
						if (res.confirm) {
							let {
								data
							} = await uni.$http.post("/twk/delcollection", obj)
							if (data.code === 200) {
								_this.getCollectionState()
								uni.showToast({
									title: "取消收藏成功"
								})
								_this.collectionState = false
							}
						}
					}
				})

			},
			// 显示留言弹出层方法
			showYanPopup: function(msg, pObj, zuObj) {
				let token = uni.getStorageSync("token")
				if (!token) {
					uni.showModal({
						title: "您未登录，是否去登录？",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}
						}
					})
					return
				}
				this.yanTip = msg
				this.pobj = pObj
				this.zuobj = zuObj
				console.log(this.yanTip)
				this.$refs.yanpopup.open("bottom")
				this.videoState = false
			},
			// 关闭留言弹出层方法
			closeYanPopup: function() {
				this.yanContent = ""
				this.$refs.yanpopup.close()
				this.videoState = true
			},
			// 留言完成的方法
			finishyan: async function() {
				let obj = {
					content: this.yanContent,
					goods_id: this.curGoodsObj._id,
					user_id: this.loginUser._id,
					is_seller: this.comeTimeState,
					time: Date.now()
				}
				if (this.yanTip == "想了解什么,就说出来吧") {
					obj.level = 1
					let {
						data
					} = await uni.$http.post("/twk/addcomment", obj)
					if (data.code === 200) {
						setTimeout(() => {
							this.getYanList(this.curGoodsObj._id)
							uni.showToast({
								title: data.msg
							})
						}, 1000)
					} else {
						uni.showModal({
							title: "提示",
							content: data.msg,
							showCancel: false,
							confirmText: "知道了",
							confirmColor: "#45b97c"
						})
					}
				} else {
					obj.level = 2
					obj.pid = this.pobj._id
					obj.zu_id = this.zuobj._id
					obj.pnickname = this.pobj.user_id.nickname
					let {
						data
					} = await uni.$http.post("/twk/addcomment", obj)
					if (data.code === 200) {
						setTimeout(() => {
							this.getYanList(this.curGoodsObj._id)
							uni.showToast({
								title: data.msg
							})
						}, 1000)
					} else {
						uni.showModal({
							title: "提示",
							content: data.msg,
							showCancel: false,
							confirmText: "知道了",
							confirmColor: "#45b97c"
						})
					}
				}
				this.yanContent = ""
				this.$refs.yanpopup.close()
				this.videoState = true
			},
			// 显示私聊弹出层方法
			showChatPopup: function() {
				let token = uni.getStorageSync("token")
				if (!token) {
					uni.showModal({
						title: "您未登录，是否去登录？",
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}
						}
					})
					return
				}
				if (this.chatList.length >= 1) {
					this.scrollToView = "msg" + this.chatList[this.chatList.length - 1]._id
				}
				setTimeout(()=>{
					this.scrollToView = ""
				},1000)
				this.$refs.chatpopup.open("bottom")
				this.videoState = false
			},
			// 关闭私聊弹出层方法
			closeChatPopup: function() {
				this.$refs.chatpopup.close()
				this.videoState = true
			},
			// 聊天发送数据方法
			async sendMsg() {
				let obj = {
					content: this.content,
					time: Date.now(),
					my_id: this.loginUser._id,
					other_id: this.curGoodsObj.user_id,
					goods_id: this.curGoodsObj._id
				}
				let {
					data
				} = await uni.$http.post("/twk/addchat", obj)
				if (data.code === 200) {
					obj['mode'] = 'message'
					obj['type'] = '私信'
					obj['otherid'] = this.curGoodsObj.user_id
					uni.$websocket.send(JSON.stringify(obj))
					uni.$store.dispatch("getChatList", {
						gid: this.curGoodsObj._id,
						loginid: this.loginUser._id,
						pubid: this.curGoodsObj.user_id
					})
					uni.$store.dispatch("getAllChatList")
					this.chatList = uni.$store._state.data.twk.chatList
					this.getChat()
					this.content = ""
					uni.showToast({
						title: "发送成功"
					})
					setTimeout(() => {
						this.scrollToView = "msg" + this.chatList[this.chatList.length - 1]._id
						console.log("scrollToView",this.scrollToView)
					},1000)

				}
			},
			// 获取收藏文件夹列表数据方法
			getCollectionFolderList: async function() {
				let {
					data
				} = await uni.$http.get("/twk/collectionfolderlist?userId=" + this.loginUser._id)
				if (data.code === 200) {
					this.collectionFolderList = data.data
				}
			},
			// 获取当前商品的发布者对象方法
			async getPubUser(id) {
				let {
					data
				} = await uni.$http.get("/twk/getuser?id=" + id)
				if (data.code === 200) {
					this.pubUser = data.data[0]
				}

			},
			// 获取收藏当前商品的总人数方法
			async getCollectionTotal(id) {
				let {
					data
				} = await uni.$http.get("/twk/getcollectiontotal?id=" + id)
				if (data.code === 200) {
					this.collectionTotal = data.total
				}
			},
			// 从一个数组中随机获取几个元素的方法 如：从4个元素中取出2个元素
			getRandomArrayElements(arr, count) {
				var shuffled = arr.slice(0), // shuffled = arr
					i = arr.length, // i = 4
					min = i - count, // min = 2
					temp, index;
				while (i-- > min) {
					index = Math.floor((i + 1) * Math.random()); // index = 随机数  0-4中的一个随机数
					temp = shuffled[index]; // temp是随机元素
					shuffled[index] = shuffled[i]; // 调换顺序
					shuffled[i] = temp;
				}
				return shuffled.slice(min); // 返回一个数组包含后两个元素
			},
			// 获取可能感兴趣的商品列表方法
			async getCaiGoodsList(cid) {
				let {
					data
				} = await uni.$http.get("/twk/getcaigoodslist?cid=" + JSON.stringify(cid) + "&loginid=" + this
					.loginUser._id)
				if (data.code === 200) {
					data.data.forEach(item => {
						item.time = timeObj.timeMaker(item.time)
					})
					this.caiGoodsList = this.getRandomArrayElements(data.data, 2)
				}
			},
			// 换一批方法
			huan() {
				this.getCaiGoodsList(this.curGoodsObj.category_id)
			},
			// 获取留言列表和留言总数方法
			async getYanList(gid) {
				let {
					data
				} = await uni.$http.get("/twk/commentlist?gid=" + gid)

				if (data.code === 200) {
					data.data.forEach(item => {
						item.time = timeObj.timeMaker(Number(item.time))
						item.is_zhan = false
						if (item.children) {
							item.children.forEach(item2 => {
								item2.time = timeObj.timeMaker(Number(item2.time))
							})
						}
					})
					this.yanList = data.data
					this.yanTotal = data.total
				}
			},
			// 获取私信列表数据方法
			async getChat() {
				let {
					data
				} = await uni.$http.get("/twk/chatlist?gid=" + this.curGoodsObj._id + "&loginid=" + this.loginUser
					._id + "&pubid=" + this.curGoodsObj.user_id)
				if (data.code === 200) {
					this.chatList = data.data;
				}
			},
			// 关注方法
			async guanzhu() {
				let obj = {
					time: Date.now(),
					my_id: this.loginUser._id,
					other_id: this.curGoodsObj.user_id
				}
				let {
					data
				} = await uni.$http.post("/twk/addguanzhu", obj)
				if (data.code === 200) {
					this.guanzhuState = true
					uni.showToast({
						title: "关注成功"
					})
				}
			},
			// 取消关注方法
			async cancleGuanzhu() {
				let obj = {
					my_id: this.loginUser._id,
					other_id: this.curGoodsObj.user_id
				}
				let {
					data
				} = await uni.$http.post("/twk/delguanzhu", obj)
				if (data.code === 200) {
					this.guanzhuState = false
					uni.showToast({
						title: "取消关注成功"
					})
				}
			},
			// 获取关注状态
			async getGuanzhuState() {
				let {
					data
				} = await uni.$http.get("/twk/guanzhulist?loginid=" + this.loginUser._id + "&pubid=" + this.curGoodsObj
					.user_id)
				if (data.code === 200) {
					this.guanzhuState = data.state
				}
			},
			// 获取点赞列表数据方法
			async getSupportList() {
				let {
					data
				} = await uni.$http.get("/twk/supportlist")
				if (data.code === 200) {
					this.supportList = data.data
				}
			},
			// 点赞方法
			async support(gid) {
				let obj = {
					time: Date.now(),
					user_id: this.loginUser._id,
					goods_id: gid
				}
				let {
					data
				} = await uni.$http.post("/twk/addsupport", obj)
				if (data.code === 200) {
					this.getCaiGoodsList(this.curGoodsObj.category_id)
					uni.showToast({
						title: "点赞成功"
					})
				}
			},
			// 取消点赞方法
			async cancleSupport(gid) {
				let obj = {
					user_id: this.loginUser._id,
					goods_id: gid
				}
				let {
					data
				} = await uni.$http.post("/twk/delsupport", obj)
				if (data.code === 200) {
					this.getCaiGoodsList(this.curGoodsObj.category_id)
					uni.showToast({
						title: "取消点赞成功"
					})
				}
			},
			// 通过商品id获取商品信息方法
			async getCurGoodsObj(id){
				let {data} = await uni.$http.get("/twk/getcurgoodsobj?id="+id)
				if(data.code === 200){
					console.log("data",data)
					this.curGoodsObj = data.obj
				}
			},
			async editGoods(id){
				await uni.$http.post("/twk/edit",{id})
			}


		},
		onLoad(option) {
			this.getCurGoodsObj(option.id)
			this.editGoods(option.id)
			
			setTimeout(()=>{
				this.getSupportList()
				this.getPubUser(this.curGoodsObj.user_id)
				this.getCollectionTotal(this.curGoodsObj._id)
				this.getCollectionFolderList()
				this.getCaiGoodsList(this.curGoodsObj.category_id)
				this.loginUser = uni.getStorageSync("user")
				// 记录发布者来此页面的时间
				if (this.curGoodsObj.user_id === this.loginUser._id) {
					this.curGoodsObj.come_time = Date.now()
					uni.request({
						url: 'http://127.0.0.1:3366/twk/editGoods',
						data: this.curGoodsObj,
						method: 'POST'
					})
					this.comeTimeState = true
				}
				this.getYanList(this.curGoodsObj._id)
				uni.$store.dispatch("getChatList", {
					gid: this.curGoodsObj._id,
					loginid: this.loginUser._id,
					pubid: this.curGoodsObj.user_id
				})
				uni.$store.dispatch("getAllChatList")
				this.allChatList = uni.$store._state.data.twk.allChatList
				this.chatList = uni.$store._state.data.twk.chatList
				this.getChat()
				this.getCollectionState()
				this.getGuanzhuState()
			},500)
		},
		// onLaunch(){
		// 	console.log(132)
		// },
		onShow: function() {
			console.log('App Show');
		},
		onHide: function() {
			console.log('App Hide');
		}
	}
</script>

<style scoped>
	@import "@/static/iconfont.css";

	.detail-top {
		padding: 0 10px;
		box-sizing: border-box;
		border-bottom: 1px solid #ccc;
	}

	/* 发布者部分 */
	.detail-top .header1 {
		height: 50px;
		/* background-color: aqua; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 5px;
	}

	.detail-top .header1 .left {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.detail-top .header1 .left .img {
		height: 40px;
		width: 40px;
		border-radius: 50%;
		border: 1px solid #ccc;
		margin-right: 10px;
	}

	.detail-top .header1 .left .img img {
		height: 100%;
		width: 100%;
		border-radius: 50%;
	}

	.detail-top .header1 .left .content {
		height: 80%;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		color: gray;
	}

	.detail-top .header1 .left .content .title {
		font-size: 13px;
		font-weight: 600;
		display: flex;
	}

	.detail-top .header1 .left .content .title .btn {
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 35px;
		height: 20px;
		font-size: 10px;
		background-color: #ffd400;
		border-radius: 30px;
		box-sizing: border-box;
	}

	.detail-top .header1 .left .content .time {
		font-size: 12px;
	}

	.detail-top .header1 .right {
		height: 80%;
	}

	.detail-top .header1 .right .btn {
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 55px;
		height: 25px;
		font-size: 14px;
		background-color: #ffd400;
		border-radius: 30px;
		box-sizing: border-box;
	}

	/* 商品信息部分 */
	.goods {
		margin-bottom: 20px;
	}

	.goods .title {
		margin-bottom: 15px;
		font-size: 15px;
		font-weight: 700;
	}

	.goods .message {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* background-color: antiquewhite; */
		height: 40px;
		margin-bottom: 10px;
	}

	/* 商品内容部分 */
	.goods .content {
		font-size: 14px;
		font-weight: 700;
		line-height: 20px;
		margin-bottom: 10px;
		text-indent: 2em;
	}

	/* 留言部分 */
	.commen {
		margin-bottom: 15px;
	}

	/* 头部部分 */
	.commen .header {
		height: 30px;
		margin-bottom: 5px;
		display: flex;
		align-items: center;
	}

	.commen .header .btn {
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 75px;
		height: 25px;
		font-size: 14px;
		background-color: yellow;
		box-sizing: border-box;
	}

	/* 主体部分 */
	/* .commen .section{} */
	/* 一级 */
	.commen .section .inner .first {
		display: flex;
		/* height: 50px; */
		align-items: center;
		margin-bottom: 15px;
	}

	.commen .section .inner .first .img {
		height: 40px;
		width: 40px;
		border-radius: 50%;
		border: 1px solid #ccc;
		margin-right: 10px;
	}

	.commen .section .inner .first .img img {
		height: 100%;
		width: 100%;
		border-radius: 50%;
	}

	.commen .section .inner .first .si .btn {
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 35px;
		height: 20px;
		font-size: 10px;
		background-color: #ffd400;
		border-radius: 30px;
		box-sizing: border-box;
		margin-left: 25px;
	}

	/* 二级 */
	.commen .section .inner .second {
		display: flex;
		/* height: 35px; */
		/* align-items: center; */
		margin-bottom: 15px;
	}

	.commen .section .inner .second .img {
		height: 25px;
		width: 25px;
		border-radius: 50%;
		border: 1px solid #ccc;
		margin-right: 5px;
		box-sizing: border-box;
	}

	.commen .section .inner .second .img img {
		height: 100%;
		width: 100%;
		border-radius: 50%;
	}

	.commen .section .inner .second .si {
		margin-left: 30px;
	}

	.commen .section .inner .second .si .btn {
		padding: 0;
		margin: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 35px;
		height: 20px;
		font-size: 10px;
		background-color: #ffd400;
		border-radius: 30px;
		box-sizing: border-box;
		margin-left: 25px;
	}

	/* 可能感兴趣部分 */
	.detail-bottom {
		margin-top: 15px;
	}

	.detail-bottom .header {
		text-align: center;
		margin-bottom: 10px;
	}

	.detail-bottom .header .refresh {
		position: absolute;
		right: 20px;
	}

	/* 主体部分 */
	.detail-bottom .section {
		width: 100%;
		padding: 0px 10px;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.detail-bottom .section .content {
		width: 47%;
		margin-bottom: 10px;
	}

	.detail-bottom .section .content .title {
		width: 100%;
		/* background-color: wheat; */
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.detail-bottom .section .content .title .con {
		height: 30px;
		width: 80%;
		font-size: 12px;
		font-weight: 700;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.detail-bottom .section .content .title .time {
		font-size: 10px;
		color: dimgray;
		font-weight: 700;
		/* margin-top: 15px; */
	}

	.detail-bottom .section .content .price {
		height: 20px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		/* align-items: center; */
		align-content: flex-end;
	}

	.detail-bottom .section .content .user {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.detail-bottom .section .content .user .left {
		display: flex;
		align-items: center;
	}

	.detail-bottom .section .content .user .left .img {
		height: 25px;
		width: 25px;
		border-radius: 50%;
		border: 1px solid #ccc;
		margin-right: 5px;
		border-radius: 50%;
	}

	/* 收藏弹出框里面部分 */
	.collection-popup-content .header {
		display: flex;
		height: 40px;
		align-items: center;
		/* background-color: lawngreen; */
		justify-content: space-between;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.collection-popup-content .header .left {
		font-weight: 600;
		font-size: 13px;
		display: flex;
		align-items: center;
	}

	.collection-popup-content .header .right {
		font-size: 12px;
		color: gray;
	}

	.collection-popup-content .uni-list .uni-list-cell {
		height: 40px;
		padding: 0px 10px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 13px;
		font-weight: 600;
	}

	/* 留言弹出框部分 */
	.yan-popup-content {
		margin-bottom: 15px;
	}

	.yan-popup-content .header {
		display: flex;
		align-items: center;
		height: 40px;
		justify-content: center;
		font-size: 14px;
		font-weight: 700;
	}

	.yan-popup-content .header .x {
		position: absolute;
		right: 10px;
	}

	/* 私聊弹出框部分 */
	.chat-popup-content {
		margin-bottom: 15px;
	}

	.chat-popup-content .header {
		display: flex;
		align-items: center;
		height: 40px;
		justify-content: center;
		font-size: 14px;
		font-weight: 700;
	}

	.chat-popup-content .header .x {
		position: absolute;
		right: 10px;
	}

	.chat-popup-content .section {
		height: 40vh;
		overflow-y: auto;
	}

	.chat-popup-content .section .content {
		padding: 0px 10px;
		box-sizing: border-box;
	}

	.chat-popup-content .section .content .left {
		display: flex;
		justify-content: flex-start;
		margin-bottom: 15px;
	}

	.chat-popup-content .section .content .left .img {
		height: 40px;
		width: 40px;
		border-radius: 50%;
		border: 1px solid #ccc;
		margin-right: 10px;
	}

	.chat-popup-content .section .content .left .content {
		border: 1px solid #ccc;
		display: flex;
		align-items: center;
		padding: 5px 10px;
		box-sizing: border-box;
		border-radius: 5px;
	}

	.chat-popup-content .section .content .right {
		display: flex;
		justify-content: flex-end;
		margin-bottom: 15px;
	}

	.chat-popup-content .section .content .right .img {
		height: 40px;
		width: 40px;
		border-radius: 50%;
		border: 1px solid #ccc;
		margin-left: 10px;
	}

	.chat-popup-content .section .content .right .content {
		border: 1px solid #ccc;
		display: flex;
		align-items: center;
		padding: 5px 10px;
		box-sizing: border-box;
		border-radius: 5px;
		background-color: aliceblue;
	}

	.chat-popup-content .input {
		display: flex;
		padding: 0px 10px;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
	}

	.chat-popup-content .input .btn {
		background-color: #ffd400;
		position: absolute;
		right: 15px;
	}

	.chat-popup-content .input .disable {
		background-color: gray;
		position: absolute;
		right: 15px;
	}
</style>